<template>
  <div class="container">
    <div style="">
      <div class="card_nd_title">
        <span>日常监测趋势</span>
        <div class="line" style="width:64px;"></div>
      </div>
      <div class="card_content"></div>
      <div class="chart" v-if="emptySugar">
        <span>空腹血糖</span>
        <line-charts
          :position="{ x: '40%' }"
          :x-axis-data="charts1.axisData"
          :y-axis-unit="charts1.axisUnit"
          :visual-map="charts1.visualMap"
          :legend="charts1.legend"
          :show-legend-arr="charts1.showLegend"
          :series-data="charts1.seriesData"
          :add-line="true"
          :line-style="charts1.lineStyle"
          :add-area="true"
          :area-style="charts1.areaStyle"
        />
      </div>

      <div class="chart" v-if="emptyAfter">
        <span>餐后血糖</span>
        <line-charts
          :position="{ x: '40%' }"
          :x-axis-data="charts2.axisData"
          :y-axis-unit="charts2.axisUnit"
          :visual-map="charts2.visualMap"
          :legend="charts2.legend"
          :show-legend-arr="charts2.showLegend"
          :series-data="charts2.seriesData"
          :add-line="true"
          :line-style="charts2.lineStyle"
          :add-area="true"
          :area-style="charts2.areaStyle"
        />
      </div>

      <div class="chart" v-if="charts3.axisData && charts3.axisData.length > 0">
        <span>血压</span>
        <line-charts
          :position="{ x: '30%' }"
          :x-axis-data="charts3.axisData"
          :y-axis-unit="charts3.axisUnit"
          :visual-map="charts3.visualMap"
          :legend="charts3.legend"
          :show-legend-arr="charts3.showLegend"
          :series-data="charts3.seriesData"
          :add-line="true"
          :line-style="charts3.lineStyle"
          :add-area="true"
          :area-style="charts3.areaStyle"
        />
      </div>

      <div class="chart" v-if="type == 2 && charts4.axisData && charts4.axisData.length > 0">
        <span>体重</span>
        <line-charts
          :position="{ x: '40%' }"
          :x-axis-data="charts4.axisData"
          :y-axis-unit="charts4.axisUnit"
          :visual-map="charts4.visualMap"
          :legend="charts4.legend"
          :show-legend-arr="charts4.showLegend"
          :series-data="charts4.seriesData"
          :add-line="true"
          :line-style="charts4.lineStyle"
          :add-area="true"
          :area-style="charts4.areaStyle"
        />
      </div>
    </div>
  </div>
</template>

<script>
import LineCharts from '@/views/report2/components/LineChart'
export default {
  name: 'Trend',
  props: ['report', 'type'],
  components: { LineCharts },
  data() {
    return {
      charts1: {
        visualMap: {
          top: 0,
          right: 30,
          align: 'left',
          orient: 'horizontal',
          precision: 1,
          pieces: [
            {
              gt: 0,
              lte: 3.9,
              color: '#e88327'
            },
            {
              gt: 3.9,
              lte: 6.1,
              color: '#00d570'
            },
            {
              gt: 6.1,
              color: '#fb0b0a'
            }
          ]
        },
        axisData: [],
        axisUnit: ' mmol/L',
        legend: ['空腹'],
        showLegend: [],
        seriesData: [],
        lineStyle: [
          {
            index: 0,
            lineColor: '#f06980',
            textColor: '#4d4d4d',
            data: [4.4, 7.8]
          }
        ],
        areaStyle: {
          color: '#F2F2F2',
          data: [4.4, 10]
        }
      },
      charts2: {
        visualMap: {
          top: 0,
          right: 30,
          align: 'left',
          orient: 'horizontal',
          precision: 1,
          pieces: [
            {
              gt: 0,
              lte: 4.4,
              color: '#e88327'
            },
            {
              gt: 4.4,
              lte: 7.8,
              color: '#00d570'
            },
            {
              gt: 7.8,
              color: '#fb0b0a'
            }
          ],
          outOfRange: {
            color: '#999'
          }
        },
        axisData: [],
        axisUnit: ' mmol/L',
        legend: ['早餐后', '午餐后', '晚餐后'],
        showLegend: [],
        seriesData: [],
        lineStyle: [
          {
            index: 0,
            lineColor: '#f06980',
            textColor: '#4d4d4d',
            data: [4.4, 7.8]
          }
        ],
        areaStyle: {
          color: '#F2F2F2',
          data: [4.4, 10]
        }
      },
      charts3: {
        visualMap: {
          top: 0,
          right: 30,
          align: 'left',
          orient: 'horizontal',
          precision: 1,
          pieces: [
            {
              gt: 40,
              lte: 60,
              color: '#e88327'
            },
            {
              gt: 60,
              lte: 140,
              color: '#00d570'
            },
            {
              gt: 140,
              color: '#fb0b0a'
            }
          ],
          outOfRange: {
            color: '#999'
          }
        },
        axisData: [],
        axisUnit: ' mmHg',
        legend: ['收缩压', '舒张压', '心率'],
        showLegend: [],
        seriesData: [],
        lineStyle: [
          {
            index: 0,
            lineColor: '#f06980',
            textColor: '#4d4d4d',
            data: [60, 140]
          }
        ],
        areaStyle: {
          color: '#F2F2F2',
          data: [60, 140]
        }
      },
      charts4: {
        visualMap: {
          top: 0,
          right: 30,
          align: 'left',
          orient: 'horizontal',
          precision: 1,
          pieces: [
            {
              gt: 10,
              lte: 18,
              color: '#e88327'
            },
            {
              gt: 18,
              lte: 24,
              color: '#00d570'
            },
            {
              gt: 24,
              lte: 30,
              color: '#fb0b0a'
            }
          ],
          outOfRange: {
            color: '#999'
          }
        },
        axisData: [],
        axisUnit: '',
        legend: ['BMI', '体重'],
        showLegend: [],
        seriesData: [],
        lineStyle: [
          {
            index: 0,
            lineColor: '#f06980',
            textColor: '#4d4d4d',
            data: [18, 24]
          }
        ],
        areaStyle: {
          color: '#F2F2F2',
          data: [18, 24]
        }
      }
    }
  },
  computed: {
    emptySugar() {
      const empty = this.report.sugarChart.value[1].filter(v => {
        return v !== "''"
      })
      return empty.length > 0
    },
    emptyAfter() {
      const empty1 = this.report.sugarChart.value[2].filter(v => {
        return v !== "''"
      })
      const empty2 = this.report.sugarChart.value[4].filter(v => {
        return v !== "''"
      })
      const empty3 = this.report.sugarChart.value[6].filter(v => {
        return v !== "''"
      })
      return this.charts2.axisData && (empty1.length > 0 || empty2.length > 0 || empty3.length > 0)
    }
  },
  created() {
    this.charts1.axisData = this.report.sugarChart?.dates
    this.charts2.axisData = this.report.sugarChart?.dates
    this.charts3.axisData = this.report.periodBloodPressure?.dates
    this.charts4.axisData = this.report.periodBmi?.dates
    this.charts1.seriesData = [this.report.sugarChart.value[1]]
    this.report.sugarChart &&
      (this.charts2.seriesData = [
        this.report.sugarChart.value[2],
        this.report.sugarChart.value[4],
        this.report.sugarChart.value[6]
      ])
    this.charts3.seriesData = this.report.periodBloodPressure?.value
    this.report.periodBmi &&
      (this.charts4.seriesData = [
        this.report.periodBmi.bmiString,
        this.report.periodBmi.heightString,
        this.report.periodBmi.weightString
      ])
  },
  methods: {}
}
</script>

<style lang="less" scoped>
@media print {
  .container {
    position: relative;
    page-break-inside: avoid;
    page-break-after: always;
  }
  .chart {
    page-break-inside: avoid;
  }
}
.container {
  padding: 50px 24px 0 24px;
}
.card_content {
  margin-top: 15px;
}
.card_nd_title {
  margin-bottom: 30px;
  span {
    font-size: 16px;
    // padding-left: 10px;
    font-weight: bold;
    color: #000;
  }
}
.line {
  height: 6px;
  border-radius: 6px;
  // margin-left: 10px;
  background-color: #00b5d4;
  opacity: 0.3;
}
</style>

